<template>
  <div class="wrapper" ref="wrapper">
    <div class="content">
      <slot></slot>
    </div>
  </div>
</template>

<script>
import Bscroll from "better-scroll";
import Pullup from "@better-scroll/pull-up";
Bscroll.use(Pullup);
export default {
  // 组件名称
  name: "scroll", // 组件参数 接收来自父组件的数据
  props: {
    probetype: {
      type: Number,
      default: 0,
    },
  }, // 局部注册的组件
  components: {}, // 组件状态值
  data() {
    return {
      bscroll: null, // 1. 保存new Bscroll的实例对象
      data: null,
    };
  },
  // 组件创建并挂载元素之后的生命周期函数
  mounted() {
    // 调用initBscroll()方法
    this.initBscroll();
  },
  // 数据更新调用的生命周期函数
  updated() {
    // 调用实例对象下的refresh()方法,用来解首次打开页面无法实现better-scroll效果
    // this.bscroll.refresh();
  },
  methods: {
    initBscroll() {
      this.bscroll = new Bscroll(this.$refs.wrapper, {
        pullUpLoad: true,
        probeType: this.probetype, // 3: 可以记录惯性距离  2: 不记录惯性距离  0,1都不记录任何方式的滚动距离
        click: true,
        taps: true,
        deceleration: 0.008,
        observeDom: true,
        observeImage: true,
      });
      this.bscroll.on("pullingUp", () => {
        this.$emit("pullingUp");
        this.bscroll.finishPullUp(); // 每次上拉加载完之后调用此方法,才会继续加载下一次
      });
      if (this.probetype == 2 || this.probetype == 3) {
        this.bscroll.on("scroll", (position) => {
          this.$emit("scroll1", position);
        });
      }
    },
  },
};
</script>
<style scoped>
</style>